<template>
    <view class="wrap">
        <!-- 正在上传列表 -->
        <view class="uploading-list" v-if="showUploadProcess">
            <view class="left-wrap">
                <image :src="item.url" class="uploading-image" v-for="(item, index) in previewList" :key="index"></image>
                <view class="selectPhotosNum" v-if="tobeUploadPhotos.length > 4">+{{ tobeUploadPhotos.length }}</view>
            </view>
            <!-- 上传失败 -->
            <view class="loading-wrap error-loading-wrap" v-if="uploadErrNum > 0">
                <view class="loading-tip">
                    <span>上传失败，请重新上传</span>
                    <image src="@/pages/minePages/static/upload/close.png" mode="" @click="reUpload"></image>
                </view>
                <view class="loading-process-wrap"></view>
            </view>
            <!-- 正在上传 -->
            <view class="loading-wrap " v-else>
                <view class="loading-tip">
                    <view>{{ tobeUploadPhotos.length }}张照片</view>
                    <span>正在上传</span>
                </view>
                <view class="loading-process-wrap"><view class="loading-process" :style="{ left: loadPrecent }"></view></view>
            </view>
        </view>
        <!-- 已经上传图片列表 -->
        <scroll-view v-if="hadUploadPhotosList.length > 0" scroll-y="true" class="photos-list-wrap" :style="{ height: scrollHeight }" @scrolltolower="loadMoreData">
            <view class="item" v-for="(item, index) in hadUploadPhotosList" :key="item.time">
                <view class="date">上传时间：{{ item.time }}</view>
                <view class="photo-list"><image :src="item2.image_url" v-for="(item2, index2) in item.list" :key="index2"></image></view>
            </view>
            <!-- 没有更多数据时候 -->
            <view class="noMorePhotos" v-if="noMorePhotos">没有更多数据了</view>
        </scroll-view>
        <!-- 没有数据时候 -->
        <view class="" v-if="noPhotos"><NoData :textTip="textTip"></NoData></view>
        <!-- 上传照片 -->
        <view class="upload-btn-wrap" @click="choosePhotos">
            <image src="@/pages/minePages/static/upload/uploadIcon.png" mode="" class="icon"></image>
            上传照片
        </view>
    </view>
</template>
<script>
import { uploadFile } from '@/common/utils.js';
import NoData from '@/components/NoData/index.vue';
import { getUploadPhotoes } from '@/api/photos.js';
export default {
    name: '',
    data() {
        return {
            scrollHeight: 300,
            // 分页请求id
            pageDataId: 0,
            // 待上传的图片列表
            tobeUploadPhotos: [],
            // 上传成功图片数量
            uploadSuccessNum: 0,
            // 上传失败图片数量
            uploadErrNum: 0,
            // 开始上传
            startUpload: false,
            // 上传完成
            uploadEnd: false,
            // 加载的百分比
            loadPrecent: 0,
            // 已经上传的图片列表
            hadUploadPhotosList: [],
            noPhotos: false,
            noMorePhotos: false,
            textTip: '暂无照片，请点击上传照片按钮上传照片'
        };
    },
    onLoad(option) {},
    computed: {
        previewList() {
            return this.tobeUploadPhotos.filter((item, index) => {
                return index < 4;
            });
        },
        showUploadProcess() {
            return (this.tobeUploadPhotos.length > 0 && !this.uploadEnd) || (this.uploadEnd && this.uploadErrNum > 0);
        }
    },
    mounted() {
        this.getScrollHeight();
    },
    created() {
        this.getList();
    },
    methods: {
        getScrollHeight() {
            this.$uniPromise.getSystemInfo().then(res => {
                if (this.showUploadProcess) {
                    this.scrollHeight = res.windowHeight - uni.upx2px(100 + 110) + 'px';
                } else {
                    this.scrollHeight = res.windowHeight - uni.upx2px(100) + 'px';
                }
            });
        },
        async getList() {
            let data = await getUploadPhotoes({ id: this.pageDataId });
            this.pageDataId = data.minid;
            if (data.list.length > 0) {
                this.hadUploadPhotosList = this.getGroupByTime(data.list, this.hadUploadPhotosList);
            } else {
                if (this.hadUploadPhotosList.length > 0) {
                    this.noMorePhotos = true;
                } else {
                    this.noPhotos = true;
                }
            }
            if (this.hadUploadPhotosList.length <= 0) {
                this.noPhotos = true;
            }
        },
        // 根据时间进行分类
        getGroupByTime(list, targetList) {
            let tempList = targetList;
            list.forEach((item, index) => {
                let photoTime = item.time.split(' ')[0];
                if (tempList.length > 0) {
                    for (let i = 0; i < tempList.length; i++) {
                        if (tempList[i].time === photoTime) {
                            item.time = tempList[i].time;
                            tempList[i].list.push(item);
                            return;
                        }
                    }
                    tempList.push(this.createNewTimeGroup(item));
                } else {
                    tempList.push(this.createNewTimeGroup(item));
                }
            });
            return tempList;
        },
        createNewTimeGroup(photo) {
            let dateGroup = {};
            dateGroup.time = photo.time.split(' ')[0];
            dateGroup.list = [];
            dateGroup.list.push(photo);
            return dateGroup;
        },
        // 从相册选择相片
        async choosePhotos() {
            if (this.startUpload) {
                this.$showToast('图片正在上传');
                return;
            }
            this.init();
            let res = await this.$uniPromise.chooseImage({ count: 999 });
            if (res.tempFilePaths.length > 0) {
                this.getTobeUploadPhotos(res.tempFilePaths);
            }
        },
        // 获取所有待上传的照片
        getTobeUploadPhotos(photosList) {
            photosList.forEach(item => {
                let temp = {};
                temp.url = item;
                this.tobeUploadPhotos.push(temp);
            });
            this.startUpload = true;
            this.autoUpload(this.tobeUploadPhotos);
        },
        // 自动上传
        autoUpload(list) {
            list.forEach((item, index) => {
                uploadFile(`${this.$config.baseUrl}/api/tourist/v2/upload/photo`, item.url, this.$config.tokenKey, { code: this.$storage.getStorage('password') })
                    .then(res => {
                        if (res.RequestStatus === 100 && res.Data && res.Data.image_url) {
                            this.insertPhotos(this.hadUploadPhotosList, res.Data);
                            this.uploadSuccessNum += 1;
                        } else {
                            this.uploadErrNum += 1;
                        }
                        this.noPhotos = false;
                        this.checkUploadEnd();
                    })
                    .catch(err => {
                        this.uploadErrNum += 1;
                        this.noPhotos = false;
                        this.checkUploadEnd();
                    });
            });
        },
        // 上传照片插入到列表前面
        insertPhotos(list, photo) {
            let photoTime = photo.time.split(' ')[0];
            if (list.length > 0) {
                for (let i = 0; i < list.length; i++) {
                    if (list[i].time === photoTime) {
                        photo.time = photoTime;
                        list[i].list.unshift(photo);
                        return;
                    }
                }
                list.unshift(this.createNewTimeGroup(photo));
            } else {
                list.unshift(this.createNewTimeGroup(photo));
            }
        },
        // 监测是否已经上传完成
        checkUploadEnd() {
            if (this.uploadSuccessNum + this.uploadErrNum >= this.tobeUploadPhotos.length) {
                this.uploadEnd = true;
                this.startUpload = false;
            }
            this.loadPrecent = (this.uploadSuccessNum / this.tobeUploadPhotos.length) * 100 + '%';
        },

        // 初始化
        init() {
            this.startUpload = false;
            this.uploadSuccessNum = 0;
            this.uploadErrNum = 0;
            this.tobeUploadPhotos = [];
        },
        // 重新上传
        reUpload() {
            this.init();
        },
        // 分页加载
        loadMoreData() {
            if (this.noMorePhotos) {
                return;
            }
            this.getList();
        }
    },
    components: { NoData }
};
</script>
<style lang="less" scoped="scoped">
.wrap {
    width: 100%;
    font-size: 24rpx;
    .uploading-list {
        height: 80rpx;
        margin: 20rpx 20rpx 10px;
        display: flex;
        align-items: center;
        .left-wrap {
            display: flex;
            margin-right: 30rpx;
            .uploading-image {
                width: 80rpx;
                height: 80rpx;
            }
            image {
                margin-left: -40rpx;
                width: 80rpx;
                height: 80rpx;
                box-shadow: -3rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.12);
            }
            image:nth-child(1) {
                margin-left: 0;
            }
            .selectPhotosNum {
                margin-left: -40rpx;
                width: 80rpx;
                height: 80rpx;
                background-color: #c0c3c9;
                box-shadow: -3rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.12);
                color: #ffffff;
                font-size: 28rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .loading-wrap {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            flex-grow: 9;
            .loading-tip {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 24rpx;
                line-height: 30rpx;
                span {
                    color: #26bf6e;
                }
            }
            .loading-process-wrap {
                width: 100%;
                height: 10rpx;
                background-color: #edeef1;
                border-radius: 5rpx;
                position: relative;
                overflow: hidden;
                .loading-process {
                    position: absolute;
                    left: 0%;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #26bf6e;
                    border-radius: 5rpx;
                    transform: translate(-100%);
                }
            }
        }
        .error-loading-wrap {
            .loading-tip {
                span {
                    color: #fc5252;
                }
                image {
                    width: 26rpx;
                    height: 26rpx;
                }
            }
            .loading-process-wrap {
                background-color: #fc5252;
            }
        }
    }
    .photos-list-wrap {
        width: 100%;
        .item {
            margin-bottom: 20px;
            .date {
                padding-left: 30rpx;
                color: #abb3b8;
                padding-bottom: 14rpx;
                padding-top: 10px;
            }
            .photo-list {
                display: flex;
                flex-wrap: wrap;
                image {
                    width: 245rpx;
                    height: 245rpx;
                    margin: 0 6rpx 6rpx 0;
                }
            }
        }
        .noMorePhotos {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            padding-bottom: 20px;
        }
    }
    .upload-btn-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        width: 750rpx;
        height: 100rpx;
        background-color: #ffffff;
        box-shadow: 0rpx -6rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10px;
        }
    }
}
</style>
